<template>
    <view class="list">
        <view class="list-item" @click="jumpClick('/pages/user/info')">
            <u-image
                src="/static/edit_user_icon.png"
                class="mr-2"
                width="24"
                height="24"
                shape="circle"
            ></u-image>
            <view class="text">个人资料</view>
            <u-icon name="arrow-right"></u-icon>
        </view>
        <view class="list-item" @click="jumpClick('/pages/user/update_mobile')">
            <u-image
                src="/static/bind_mobile_icon.png"
                class="mr-2"
                width="24"
                height="24"
                shape="circle"
            ></u-image>
            <view class="text">修改手机号</view>
            <u-icon name="arrow-right"></u-icon>
        </view>
        <view
            class="list-item"
            @click="jumpClick('/pages/user/change_password')"
        >
            <u-image
                src="/static/edit_password_icon.png"
                class="mr-2"
                width="24"
                height="24"
                shape="circle"
            ></u-image>
            <view class="text">修改密码</view>
            <u-icon name="arrow-right"></u-icon>
        </view>
    </view>
    <view class="pl-[40rpx] pr-[40rpx] mt-[50rpx]">
            <u-button type="primary" text="退出登录" @click="userLogout"></u-button>
        </view>
</template>

<script setup lang="ts">
import { useRoute } from "@/hooks/useRoute";
import useUserStore from "@/stores/user";
import { messageSuccess } from "@/utils/message";

const userStore = useUserStore();

const userLogout = async() => {
    await userStore.logout();
    messageSuccess("退出成功！", () => {
       useRoute().jumpTo({ url: "/pages/login/login", type: "reLaunch" });
    });
}

const jumpClick = (url) => {
    useRoute().jumpTo({ url: url });
};
</script>

<style lang="scss" scoped>
.list {
    margin: 20rpx;
    width: calc((100% - 20rpx) - 20rpx) !important;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: rgb(31 31 31 / 16%) 0px 1px 3px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;

    .list-item {
        width: 100%;
        position: relative;
        display: flex;
        padding: 10px;
        justify-content: flex-start;
        align-content: center;
        align-items: stretch;
        background-color: white;

        a {
            display: flex;
        }

        .text {
            flex: 1;
            padding: 2px 0 2px 6px;
            display: flex;
            justify-content: space-between;
            flex-direction: row !important;
            align-items: center;
            font-size: 14px;
        }

        &::after {
            content: " ";
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: inherit;
            transform: scale(0.5);
            transform-origin: 0 0;
            pointer-events: none;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
    }
}
</style>
